﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/blank.Master" AutoEventWireup="true" CodeBehind="tinymce.aspx.cs" Inherits="Template.Web.Admin.tinymce" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="col-md-12">
        <pre class="brush: js">
            注意：图片支持怪费劲的，使用的是url，可以购买官方的一个插件或者自己网上搜搜如何弄
            var tmp= tinymce.get('elm1').getContent();      //此函数可获得编辑框内容 
            tinymce.activeEditor.setContent("<p style='color:red;'>这只是个测试</p>");     //设置编辑框内容   Jquery.text('内容')方法也可以达到设置编辑框内容目的
            $('#get').click(function () {
                alert(tinymce.activeEditor.getContent());
            });

            $('#set').click(function () {
                tinymce.activeEditor.setContent('<h1>好噶哈哈</h1>');
            });
        </pre>
        <pre class="brush: js">
            tinymce.init({
            // 编辑区域
            selector: '#myTextarea',
            // 主题
            theme: 'modern',
            // 语言
            language: 'zh_CN',
            //为true时，编辑工具栏隐藏
            //inline: true,
            width: 600,
            height: 300,
            //插件，可自行根据现实内容删除
            plugins: [
              'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
              'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
              'save table contextmenu directionality emoticons template paste textcolor'
            ],
            //引用的外部CSS样式，可删除
            //content_css: 'css/content.css', 
            // 菜单栏
            //menubar: false,
            //工具栏，可根据需求删除
            toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',
            // 底部状态栏
            //statusbar: false,
            // 设置为只读
            readonly: true,

        });
        </pre>
    </div>
    <div class="col-md-12">
        <textarea id="myTextarea"></textarea>
        <button id="get">getcontent</button>
        <button id="set">setcontent</button>
    </div>
    
    <script src="/scripts/tinymce/tinymce.min.js"></script>
    <script>
       

        $(document).ready(function () {
            tinymce.init({
                // 编辑区域
                selector: '#myTextarea',
                // 主题
                theme: 'modern',
                // 语言
                language: 'zh_CN',
                //为true时，编辑工具栏隐藏
                //inline: true,
                width: 600,
                height: 300,
                //插件，可自行根据现实内容删除
                plugins: [
                  'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
                  'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                  'save table contextmenu directionality emoticons template paste textcolor'
                ],
                //引用的外部CSS样式，可删除
                //content_css: 'css/content.css', 
                // 菜单栏
                //menubar: false,
                //工具栏，可根据需求删除
                toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',
                // 底部状态栏
                //statusbar: false,
                // 设置为只读
                //readonly: true,

            });
            // $('#myTextarea').text("<p style='color:red;'>这只是个测试</p>");
            
            $('#get').click(function () {
                alert(tinymce.activeEditor.getContent());
            });

            $('#set').click(function () {
                tinymce.activeEditor.setContent('<h1>好噶哈哈</h1>');
            });
        });
        
    </script>
</asp:Content>
